<template>
	<fui-tabs :tabs="tabs" @change="changeTab" :short="false" selectedColor="#333" sliderBackground="#333" />
	<view v-if="currentTab === '待送达'">
		<view style="margin-top: 20px;" v-if="messages === '您还没有未送达的订单'">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
			<view class="container" v-for="(food,index) in foodOrder" :key="index">
				<view class="order-box">
					<view class="header">
						<view class="store-name">订单编号：{{food.orderId}}</view>
						<view class="status">{{orderType}}</view>
					</view>
					<view class="item" v-for="(items,itemsIndex) in food.cao" :key="itemsIndex" @click="godetailsOrder(food,items)">
						<image class="item-image" :src="items.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{items.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{items.comboContain}}</view>
								<view class="item-quantity">x{{nums[index][itemsIndex]}}</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNumsComputed[index]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button" @click="gozailaiyidan">再来一单</button>
					</view>
				</view>
			</view>	
		</view>
	</view>
	<view v-else-if="currentTab === '已送达'">
		<view style="margin-top: 20px;" v-if="message === '您还没有已送达的订单'">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无订单记录">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>
		<view v-else>
			<view class="container" v-for="(food,index) in foodOrders" :key="index">
				<view class="order-box">
					<view class="header">
						<view class="store-name">订单编号：{{food.orderId}}</view>
						<view class="status">{{orderType}}</view>
					</view>
					<view class="item" v-for="(items,itemsIndex) in food.cao" :key="itemsIndex" @click="godetailsOrders(food,items)">
						<image class="item-image" :src="items.comboImg"></image>
						<view class="item-details">
							<view class="item-title">{{items.comboName}}</view>
							<view class="item-options-quantity">
								<view class="item-options">{{items.comboContain}}</view>
								<view class="item-quantity">x{{numss[index][itemsIndex]}}</view>
							</view>
						</view>
					</view>

					<view class="footer">
						<view class="timestamp">{{food.createTime}}</view>
						<view class="total">共{{totalNumssComputed[index]}}件商品 合计: ¥{{food.money}}</view>
					</view>
					<view class="button-container">
						<button class="reorder-button">已送达</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
	import {
		url
	} from '@/utils/request.js';
const gozailaiyidan = () => {
	uni.switchTab({
		url: '../order/order'
	})
}

const nums = ref([]);
const foodOrder = ref([]);
const foodOrders = ref([]);
const messages = ref(null);
const totalNums = ref([]);
const totalNumss = ref([]);
const numss = ref([]);
const message = ref(null);

const fetchData = () => {
	uni.getStorage({
		key: 'openId',
		success: function(res) {
			uni.request({
				url: url + '/placeAnOrder/userSelectMyNoGetOrder',
				method: 'GET',
				data: {
					openId: res.data
				},
				success: (res) => {
					messages.value = res.data.message;
					if (res.data && res.data.data) {
						foodOrder.value = res.data.data;
						nums.value = foodOrder.value.map(order => order.num.split(',').map(Number));
					} else {
						console.log("No data found for userSelectMyNoGetOrder");
					}
				}
			});
		
			uni.request({
				url: url + '/placeAnOrder/userSelectMyOKOrder',
				method: 'GET',
				data: {
					openId: res.data
				},
				success: (res) => {
					message.value = res.data.message;
					if (res.data && res.data.data) {
						foodOrders.value = res.data.data;
						numss.value = foodOrders.value.map(order => order.num.split(',').map(Number));
					} else {
						console.log("No data found for userSelectMyOKOrder");
					}
				}
			});
		}
	});
};

onLoad((options) => {
	fetchData();
});

const totalNumsComputed = computed(() => {
	return nums.value.map(numArray => numArray.reduce((a, b) => a + b, 0));
});

const totalNumssComputed = computed(() => {
	return numss.value.map(numArray => numArray.reduce((a, b) => a + b, 0));
});

const tabs = ref(['待送达', '已送达']);
const currentTab = ref('待送达');

const changeTab = (tab) => {
	currentTab.value = tabs.value[tab.index];
};

const goIndex = () => {
	uni.switchTab({
		url: '../index/index'
	});
};

const godetailsOrder = (food, items) => {
	const index = foodOrder.value.findIndex(order => order.orderId === food.orderId);
	if (index !== -1) {
		const orderDetails = {
			orderId: food.orderId,
			createTime: food.createTime,
			money: food.money,
			items: food.cao,
			nums: nums.value[index],
			totalNums: totalNumsComputed.value[index]
		};
		const orderDetailsStr = encodeURIComponent(JSON.stringify(orderDetails));
		uni.navigateTo({
			url: `/pages/detailsOrder/detailsOrder?orderDetails=${orderDetailsStr}`
		});
	}
};

const godetailsOrders = (food, items) => {
	const index = foodOrders.value.findIndex(order => order.orderId === food.orderId);
	if (index !== -1) {
		const orderDetails = {
			orderId: food.orderId,
			createTime: food.createTime,
			money: food.money,
			items: food.cao,
			nums: numss.value[index],
			totalNums: totalNumssComputed.value[index]
		};
		const orderDetailsStr = encodeURIComponent(JSON.stringify(orderDetails));
		uni.navigateTo({
			url: `/pages/detailsOrder/detailsOrder?orderDetails=${orderDetailsStr}`
		});
	}
};
</script>

<style scoped>
.container {
	padding: 10px;
}

.order-box {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px;
	background-color: #fff;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.status {
	color: #333;
	font-size: 14px;
}

.store-name {
	font-size: 14px;
	word-spacing: 10px;
}

.item {
	display: flex;
	border-bottom: 1px solid #f5f5f5;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.item-image {
	width: 36px;
	height: 36px;
	margin-right: 16px;
	align-self: center;
}

.item-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.item-title {
	font-size: 16px;
	/* font-weight: bold; */
}

.item-options-quantity {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
}

.item-quantity {
	color: #999;
}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.timestamp {
	font-size: 14px;
	color: #666;
}

.total {
	font-size: 16px;
	font-weight: bold;
}

.button-container {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.reorder-button {
	background-color: #333;
	color: #fff;
	border: none;
	padding: 5px 20px;
	margin-right: 0px;
	border-radius: 26px;
	font-size: 14px;
}
</style>
